<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/suning.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js">
    </script>
</head>

<body>
    <div id="app">
        <header>
            <!-- 顶部导航栏开始 -->
            <nav class="topbanner">
                <a href="#"><img src="img/category.png" alt=""></a>
                <a href="#"><img src="img/roll.gif" alt=""></a>
                <a href="#"><img src="img/login.png" alt=""></a>
            </nav>
            <!-- 顶部导航栏结束 -->

            <!-- 搜索开始 -->
            <section class="search-box">
                <i class="iconfont iconfangdajing"></i>
                <span>运动暖冬 满399减200</span>
            </section>
            <!-- 搜索结束 -->

        </header>

        <!-- 轮播图开始 -->
        <div class="slide-container">
            <div class="slide-wrapper">
                <div class="slide">
                    <img src="img/slider/banner1.jpg" alt="" srcset="">
                </div>
                <div class="slide">
                    <img src="img/slider/banner1.png" alt="" srcset="">
                </div>
                <div class="slide">
                    <img src="img/slider/banner2.jpg" alt="" srcset="">
                </div>
                <div class="slide">
                    <img src="img/slider/banner3.png" alt="" srcset="">
                </div>
                <div class="slide">
                    <img src="img/slider/banner4.png" alt="" srcset="">
                </div>
            </div>
        </div>


        <!-- <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/slider/banner1.jpg" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="img/slider/banner1.png" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="img/slider/banner2.jpg" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="img/slider/banner3.png" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="img/slider/banner4.png" alt="" srcset="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div> -->

        <!-- 轮播图结束 -->

        <!-- 暖冬会场开始 -->
        <section class="nd-venue">
            <a href="#"><img src="img/160802267978677573.gif" /></a>
            <a href="#"><img src="img/160802268637767581.gif" /></a>
            <a href="#"><img src="img/160801463461957544.gif" /></a>
        </section>
        <!-- 暖冬会场结束 -->

        <ul class="subnav">
            <li>
                <a href="#"><img src="img/alarm.png" alt=""><span>苏宁秒杀</span></a>
            </li>
            <li>
                <a href="#"><img src="img/supermarket.png" alt=""><span>苏宁超市</span></a>
            </li>
            <li>
                <a href="#"><img src="img/group-buying .png" alt=""><span>苏宁拼购</span></a>
            </li>
            <li>
                <a href="#"><img src="img/digital.png" alt=""><span>手机数码</span></a>
            </li>
            <li>
                <a href="#"><img src="img/home-appliances .png" alt=""><span>苏宁家电</span></a>
            </li>
            <li>
                <a href="#"><img src="img/free-fruit.png" alt=""><span>免费水果</span></a>
            </li>
            <li>
                <a href="#"><img src="img/make-money.png" alt=""><span>赚钱消消乐</span></a>
            </li>
            <li>
                <a href="#"><img src="img/sign-in.png" alt=""><span>签到有礼</span></a>
            </li>
            <li>
                <a href="#"><img src="img/ticket.png" alt=""><span>领券中心</span></a>
            </li>
            <li>
                <a href="#"><img src="img/more.png" alt=""><span>更多频道</span></a>
            </li>
        </ul>

        <section class="red-packets">
            <a href="#"><img src="img/160415964665844208.png" alt=""></a>
            <a href="#"><img src="img/160415965447533335.gif" alt=""></a>
            <a href="#"><img src="img/160415966314573447.gif" alt=""></a>
        </section>

        <section class="footernav">
            <a href="#" class="active">
                <i class="iconfont iconheart"></i>
                <span>猜你喜欢</span>
            </a>
            <a href="#">
                <i class="iconfont iconfangdajing"></i>
                <span>分类</span>
            </a>
            <a href="#">
                <i class="iconfont iconpaihangbang"></i>
                <span>排行榜</span>
            </a>
            <a href="#">
                <i class="iconfont iconcart"></i>
                <span>购物车</span>
            </a>
            <a href="#">
                <i class="iconfont iconwode1"></i>
                <span>我的易购</span>
            </a>
        </section>

    </section>
    <script src="./js/flexible.js"></script>
    <script>
        // var mySwiper = new Swiper('.swiper-container', {
        //     direction: 'horizontal', // 垂直切换选项
        //     loop: true, // 循环模式选项
        //     // autoplay: true,
        //     // 如果需要分页器
        //     pagination: {
        //         el: '.swiper-pagination',
        //     },
        // })
    </script>
</body>

</html>